Vue.component("show-detail", {
  template: `<el-dialog id="user" title="商品明细" :visible.sync="visibleDialog" width="80vw">
    <div style="display:flex;">
        <div style="width:170px;height:170px;border:1px solid #EBEEF5;flex-shrink:0;display: flex;justify-content: center; align-items: center;">
            <el-image style="width:150px;height:150px;" :preview-src-list="[BASE_IMG + data.Picture_URL]" :src="BASE_IMG + data.Picture_URL">
                <div slot="error" class="el-image__error">暂无商品封面</div>
            </el-image>
        </div>
        <el-descriptions style="width:100%" :column="3" border size="small">
            <el-descriptions-item label="商品名称">
                <el-tooltip class="item" effect="dark" :content="data.Article_Name" placement="top-start">
                    <el-input :value="data.Article_Name" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="商品编号">
                <el-tooltip class="item" effect="dark" :content="data.Article_SerialNumber" placement="top-start">
                    <el-input :value="data.Article_SerialNumber" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="商品品牌">
                <el-tooltip class="item" effect="dark" :content="data.Brand_Name" placement="top-start">
                    <el-input :value="data.Brand_Name" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <!--<el-descriptions-item label="吊牌价">
                <el-tooltip class="item" effect="dark" :content="data.Unit_Price" placement="top-start">
                    <el-input :value="data.Unit_Price" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>-->
            <el-descriptions-item label="经营商家">
                <el-tooltip class="item" effect="dark" :content="data.Supplier_Name" placement="top-start">
                    <el-input :value="data.Supplier_Name" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="是否参与团购">
                <el-tooltip class="item" effect="dark" :content="data.Group" placement="top-start">
                    <el-input :value="data.Group" :disabled="true"></el-input>
                </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="京东价">
                <el-tooltip class="item" effect="dark" :content="data.JDCOM_Unit_Price" placement="top-start">
                    <el-input :value="data.JDCOM_Unit_Price" :disabled="true"></el-input>
                </el-tooltip>    
            </el-descriptions-item>
            <el-descriptions-item label="京东链接">
                <el-tooltip class="item" effect="dark" :content="data.JDCOM_URL" placement="top-start">
                    <el-input :value="data.JDCOM_URL" :disabled="true"></el-input>
                </el-tooltip> 
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <div class="table_titel">
        <div class="titel">规格详情</div>
    </div>
    <el-table :data="tableData" stripe border min-height="50vh" style="width: 100%" @expand-change="expandChange">
        <el-table-column align="center" type="expand" width="70" label="供应商">
            <template slot-scope="props">
                <div style="padding:0 20px;">
                    <el-table :data="props.row.Children" stripe border style="width: 100%">
                        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="Supplier_Name" label="供应商"></el-table-column>
                        <el-table-column prop="Sales_Unit_Price" label="销售价格"></el-table-column>
                        <el-table-column prop="Purchase_Unit_Price" label="采购价格"></el-table-column>
                        <el-table-column prop="Stock_Remain" label="每日库存"></el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="Article_Specifications_SerialNumber" width="200" show-overflow-tooltip label="规格流水号"></el-table-column>
        <el-table-column align="center" prop="BarCode" show-overflow-tooltip label="条码"></el-table-column>
        <el-table-column align="center" prop="Specifications_Name" show-overflow-tooltip label="规格名称"></el-table-column>
        <el-table-column prop="Picture_URL" width="140" align="center" label="规格图片">
            <template v-slot="{row}">
                <el-image fit="contain" :preview-src-list="[BASE_IMG + row.Picture_URL]" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="Unit_Price" show-overflow-tooltip label="吊牌价"></el-table-column>
        <el-table-column align="center" prop="JDCOM_URL" show-overflow-tooltip label="京东连接"></el-table-column>
        <el-table-column align="center" prop="JDCOM_Unit_Price" show-overflow-tooltip label="京东价"></el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
        :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <div class="table_titel">
        <div class="titel">主图/详情图</div>
    </div>
    <div style="display:flex;">
        <el-carousel v-if="Swiper.length>0" height="400px" style="width:400px;flex-shrink: 0;" indicator-position="none">
            <el-carousel-item v-for="(item,index) in Swiper" :key="index" >
                <el-image style="width:400px;height:400px;" :preview-src-list="[BASE_IMG + item.Picture_URL]" :src="BASE_IMG + item.Picture_URL">
                    <div slot="error" class="el-image__error">加载失败</div>
                </el-image>
            </el-carousel-item>
        </el-carousel>
        <div v-if="Detail.length>0" style="width:100%; height:400px;display:flex;justify-content: center; overflow-y: auto;">
            <div style="width:400px">
                <el-image v-for="(item,index) in Detail" :key="index" style="width:400px;" fit="contain" :preview-src-list="[BASE_IMG + item.Picture_URL]" :src="BASE_IMG + item.Picture_URL">
                    <div slot="error" class="el-image__error">加载失败</div>
                </el-image>
            </div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">返回</el-button>
    </span></el-dialog>`,
  props: ["data", "visible"],
  data() {
    return {
      visibleDialog: false,
      refreshDialog: false,
      Picture_URL: [],
      tableData: [],
      form: {
        SQLSerialNumber: "P_business_article_specifications",
        PaginationNumber: 1,
        RowAmount: 10,
        ExtensionCondition: "",
        Condition: "",
      },
      total: 0,
    };
  },
  computed: {
    Swiper() {
      //冒泡排序处理轮播图
      let Picture_URL = this.Picture_URL.filter((i) => i.Picture_Type == "0");
      for (var i = 0; i < Picture_URL.length - 1; i++) {
        for (var j = 0; j < Picture_URL.length - i - 1; j++) {
          if (
            parseInt(Picture_URL[j].Picture_Order) >
            parseInt(Picture_URL[j + 1].Picture_Order)
          ) {
            var count = Picture_URL[j];
            Picture_URL[j] = Picture_URL[j + 1];
            Picture_URL[j + 1] = count;
          }
        }
      }
      return Picture_URL;
    },
    Detail() {
      //冒泡排序处理详情图
      let Picture_URL = this.Picture_URL.filter((i) => i.Picture_Type == "1");
      for (var i = 0; i < Picture_URL.length - 1; i++) {
        for (var j = 0; j < Picture_URL.length - i - 1; j++) {
          if (
            parseInt(Picture_URL[j].Picture_Order) >
            parseInt(Picture_URL[j + 1].Picture_Order)
          ) {
            var count = Picture_URL[j];
            Picture_URL[j] = Picture_URL[j + 1];
            Picture_URL[j + 1] = count;
          }
        }
      }
      return Picture_URL;
    },
  },
  watch: {
    visible() {
      this.visibleDialog = this.visible;
    },
    visibleDialog(val) {
      this.$emit("update:visible", val);
      if (val) {
        this.form.Condition = window.btoa(
          unescape(encodeURIComponent(this.data.Article_SerialNumber))
        );
        this.getList(this.form);
        this.getData();
      }
    },
  },
  methods: {
    handleSizeChange(val) {
      this.form.PaginationNumber = 1;
      this.form.RowAmount = val;
      this.getList(this.form);
    },
    handleCurrentChange(val) {
      this.form.PaginationNumber = val;
      this.getList(this.form);
    },
    expandChange(row) {
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
        type: "POST",
        data: {
          SQLSerialNumber: "A_business_supplier_article1",
          Condition: window.btoa(
            unescape(
              encodeURIComponent(row.Article_Specifications_SerialNumber)
            )
          ),
          ExtensionCondition: "",
        },
        success: function (Result) {
          row.Children = Result;
        },
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    getList(data) {
      const that = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
        type: "POST",
        data,
        success: function (Result) {
          Result.Rows.forEach((item) => {
            item["Children"] = [];
          });
          that.tableData = Result.Rows;
          that.total = Result.TotalRows;
        },
        complete: function (XMLHttpRequest) {
          that.refreshDialog = false;
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    getData() {
      const that = this;
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
        type: "POST",
        data: {
          Data: "business_article_pic",
          Condition:
            "Article_SerialNumber = '" + this.data.Article_SerialNumber + "'",
        },
        success: function (Result) {
          that.Picture_URL = Result;
          console.log(that.Swiper);
          console.log(that.Detail);
        },
        complete: function (XMLHttpRequest) {
          that.refreshDialog = false;
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
  },
});
new Vue({
  el: "#app",
  data() {
    return {
      form: {
        SQLSerialNumber: "P_business_article_info2",
        PaginationNumber: 1, //页数
        RowAmount: 10, //每页数据条数
        Condition: "",
        ExtensionCondition: "",
        Article_Name: "",
        Brand_SerialNumber: "",
      },
      total: 0,
      tableData: [], //表格数据
      ExportData: [],
      multipleSelection: [],
      brand: [], //商品品牌
      loading: false,
      dialogVisible: false,
      Article_SerialNumber: {},
    };
  },
  mounted() {
    this.getData();
    this.getList(this.form); //前端分页
  },
  methods: {
    getData() {
      const that = this;
      const Condition = "Row_Status='0'";
      $.ajax({
        headers: requestHeaders(),
        url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
        type: "POST",
        data: {
          Data: "business_brand",
          Condition,
        },
        success: function (res) {
          that.brand = res;
        },
        error: function () {
          that.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          that.loading = false;
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
    onSerach() {
      //查询方法
      this.form.PaginationNumber = 1;
      this.getList(this.form);
    },
    Show(Article_SerialNumber) {
      this.Article_SerialNumber = Article_SerialNumber;
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.form.PaginationNumber = 1;
      this.form.RowAmount = val;
      this.getList(this.form);
    },
    handleCurrentChange(val) {
      this.form.PaginationNumber = val;
      this.getList(this.form);
    },
    getList(form) {
      //换页方法
      const that = this;
      let data = deepClone(form); //
      data.Condition = window.btoa(
        unescape(
          encodeURIComponent(
            "%" +
              data.Article_Name +
              "%," +
              getCookie("user") +
              "," +
              getCookie("user")
          )
        )
      );
      let SQL = "";
      if (data.Brand_SerialNumber) {
        SQL =
          SQL +
          " and business_article_info.Brand_SerialNumber = '" +
          data.Brand_SerialNumber +
          "' ";
      }
      data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(SQL)));
      $.ajax({
        headers: requestHeaders(),
        type: "POST",
        url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
        data,
        success: function (Result) {
          that.tableData = Result.Rows;
          that.total = Result.TotalRows;
        },
        complete: function (XMLHttpRequest) {
          requestPretreatment(XMLHttpRequest);
        },
        dataType: "json",
      });
    },
  },
});
